<template>
  <div
    class="custom_collect"
    :style="{ paddingBottom: ($isMPWeiXin ? 100 : 60) / 23.44 + 'rem' }"
  >
    <Navbar></Navbar>
    <div class="custom_collect_content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div
          class="custom_collect_content_item"
          v-for="(item, index) in contentList"
          :key="'list_index_' + index"
        >
          <Groups :item="item" :index="index" v-if="item">
            <template v-slot:swipeTabsItem="{ item }">
              <div
                class="custom_swipetabs_slottab_item"
                :class="item.tab.state.toLowerCase()"
              >
                <h1>{{ item.tab.title }}</h1>
                <p>
                  {{ calculateName(item.tab.state)[0] }}
                </p>
              </div>
            </template>
            <template v-slot:swipeTabPanel="{ swipeItem, item, index }">
              <div
                class="custom_swipetabs_content_item_tabpanel_item"
                v-for="(tabpanel, tindex) in swipeItem.data"
                :key="'tabpanel_item_' + tindex"
              >
                <div class="custom_swipetabs_content_item_tabpanel_item_title">
                  <div
                    class="custom_swipetabs_content_item_tabpanel_item_title_left"
                  >
                    <span
                      >开始：{{
                        $Plugins.dateFormate(
                          parseFloat(swipeItem.time),
                          "yyyy-MM-dd hh:mm:ss"
                        )
                      }}</span
                    >
                    <span
                      >结束：{{
                        $Plugins.dateFormate(
                          parseFloat(swipeItem.endTime),
                          "yyyy-MM-dd hh:mm:ss"
                        )
                      }}</span
                    >
                  </div>
                  <van-count-down
                    millisecond
                    :time="
                      parseFloat(
                        swipeItem.state === 'SOON_OPEN'
                          ? swipeItem.time
                          : !/SOON_OPEN/.test(swipeItem.state)
                          ? swipeItem.endTime
                          : 0
                      ) - new Date().getTime()
                    "
                    format="HH:mm:ss:SS"
                    class="custom_swipetabs_slottab_title"
                    @change="
                      countDownFinishHandle(
                        index,
                        calculate(
                          parseFloat(
                            swipeItem.state === 'SOON_OPEN'
                              ? swipeItem.time
                              : !/SOON_OPEN/.test(swipeItem.state) &&
                                  swipeItem.endTime
                          ),
                          parseFloat(
                            swipeItem.state === 'SOON_OPEN'
                              ? swipeItem.endTime
                              : swipeItem.time
                          ),
                          index
                        )
                      )
                    "
                    @finish="
                      countDownFinishHandle(
                        index,
                        calculate(
                          parseFloat(
                            swipeItem.state === 'SOON_OPEN'
                              ? swipeItem.time
                              : !/SOON_OPEN/.test(swipeItem.state) &&
                                  swipeItem.endTime
                          ),
                          parseFloat(
                            swipeItem.state === 'SOON_OPEN'
                              ? swipeItem.endTime
                              : swipeItem.time
                          ),
                          index
                        )
                      )
                    "
                    :ref="'countDown_' + index"
                  >
                    <template #default="timeData">
                      <span class="block">{{ timeData.hours }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.seconds }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.milliseconds }}</span>
                    </template>
                  </van-count-down>
                </div>
                <Groups :item="tabpanel" :index="index" v-if="item"></Groups>
              </div>
            </template>
          </Groups>
        </div>
      </van-pull-refresh>
    </div>
    <Tabbar :item="tabbarItems"></Tabbar>
    <Gotop></Gotop>
    <FloatDownloadButton
      :item="{
        data: { direction: 'bottom', info: $t('lang.APP中打开'), url: 'url' },
      }"
    ></FloatDownloadButton>
  </div>
</template>
<script>
export default {
  name: "collectChannel",
  components: {
    Groups: () =>
      import(/* webpackChunkName:'groups' */ "../components/groups/groups"),
    Navbar: () =>
      import(
        /* webpackChunkName:'navbarPublic' */ "../components/navbar/navbarPublic"
      ),
    Tabbar: () =>
      import(/* webpackChunkName:'tabbar' */ "../components/tabbar/tabbar"),
    Gotop: () =>
      import(/* webpackChunkName:'gotop' */ "../components/gotop/gotop"),
    FloatDownloadButton: () =>
      import(
        /* webpackChunkName:'floatDownloadButton' */ "../components/button/floatDownloadButton"
      ),
  },
  data() {
    return {
      tabbarItems: {},
      isLoading: false,
      contentList: [],
    };
  },
  created() {
    this.getChannelData();
    this.$on("downloadClickHandle", this.downloadClickHandle);
    this.$on("goBackClickHandle", this.goBackClickHandle);
  },
  mounted() {
    window.scrollTo(1, 1);
  },
  beforeDestroy() {
    this.updateTimeOut && clearTimeout(this.updateTimeOut);
  },
  methods: {
    countDownFinishHandle(v, state) {
      this.$store.commit("setStateCountDown", { index: v, state: state });
      this.updateTimeOut && clearTimeout(this.updateTimeOut);
      this.updateTimeOut = setTimeout(() => {
        this.$forceUpdate();
      }, 500);
      /* state[1] !== "end"
        ? this.$refs["countDown_" + v][0].reset()
        : this.$refs["countDown_" + v][0].pause(); */
      //this.getPageItemsData();
      /* this.updateTimeOut && clearTimeout(this.updateTimeOut);
      this.updateTimeOut = setTimeout(() => that.$forceUpdate(), 500); */
    },
    countDownChangeHandle(v, state) {
      this.$store.commit("setStateCountDown", { index: v, state: state });
      this.updateTimeOut && clearTimeout(this.updateTimeOut);
      this.updateTimeOut = setTimeout(() => {
        this.$forceUpdate();
      }, 500);
    },
    calculateName(v) {
      let a = [
          [this.$t("lang.抢购中"), "ongoing", 1],
          [this.$t("lang.以往完成"), "yesterday_end", 0],
          [this.$t("lang.已经结束"), "end", 2],
          [this.$t("lang.即将开始"), "soon_open", 3],
          [this.$t("lang.明日开始"), "tomorrow_start", 4],
        ],
        c = a[0];
      a.forEach((b) => {
        if (b.indexOf(typeof v === "string" ? v.toLowerCase() : v) > -1) c = b;
      });
      return c;
    },
    calculate(v, old) {
      if (v > 0) {
        let c = v - new Date().getTime(); //时间差
        let d = v - old;
        let isDay = new Date(v).toDateString() === new Date().toDateString(); //是否是当天
        v =
          c < 0
            ? c + d < c && isDay
              ? 1
              : c + d > c && isDay
              ? 2
              : 0
            : c + d > c && isDay
            ? 1
            : isDay
            ? 3
            : 4;
      }
      return this.calculateName(v);
    },
    onRefresh() {
      this.isLoading = false;
    },
    downloadClickHandle(v) {
      console.log(v);
    },
    getChannelData() {
      const that = this;
      that.$store.dispatch("getStateChannelData").then((v) => {
        that.tabbarItems = v;
        that.getPageItemsData();
      });
    },
    getPageItemsData(next) {
      const that = this;
      that.$store
        .dispatch("getStateCollectData", that.$route.name)
        .then((v) => {
          console.log(v);
          that.contentList = v;
          that.$NProgress.done();
          next && next();
        });
    },
    goBackClickHandle() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_collect {
  padding: 0 0 (60 / @base) 0;
  background-color: #fff;
  .custom_collect_content {
    margin: (46 / @base) 0 0;
    padding: 0 0 (40 / @base) 0;
    .custom_swipetabs_slottab_item {
      padding: (5 / @base);
      &.ongoing {
        color: #ce1212;
      }
      &.end,
      &.yesterday_end {
        color: #ccc;
      }
      &.soon_open {
        color: #29bb89;
      }
      &.tomorrow_start {
        color: #ff7b54;
      }
      h1 {
        font-size: (18 / @base);
        font-weight: 400;
      }
      p {
        font-size: (12 / @base);
      }
    }
    .custom_swipetabs_content_item_tabpanel_item {
      .custom_swipetabs_content_item_tabpanel_item_title {
        display: flex;
        font-size: (12 / @base);
        padding: (5 / @base) (10 / @base);
        color: #ccc;
        border-bottom: (1 / @base) solid #efefef;
        .custom_swipetabs_content_item_tabpanel_item_title_left {
          margin: 0 (2.5 / @base);
          text-align: left;
          span {
            display: block;
          }
        }
        .custom_swipetabs_slottab_title {
          flex: 1;
          &.van-count-down {
            padding: (5 / @base);
          }
          span {
            vertical-align: middle;
            margin: 0 (2.5 / @base) 0 0;
            &.block {
              background-color: #efefef;
              padding: (2.5 / @base) (5 / @base);
              border-radius: (5 / @base);
              overflow: hidden;
              min-width: (20 / @base);
              display: inline-block;
              &:last-child {
                background-color: #fff;
                color: #ccc;
                padding: (2.5 / @base) 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
